<template>
  <div id="count" @click="count++">{{count}}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 100
    };
  },
  methods: {
    addCount() {
      this.count++;
    }
  },
  beforeCreate() {
    // 一般指的是组件实例创建前触发
    // 特点: 第一个生命周期.该生命周期中没有获取data . computed watch methods
    console.log("beforeCreate");
    // console.log(this.count);
    // console.log(this.addCount);
  },
  created() {
    // 一般指的是组件实例创建完成, 并且各个配置项都初始化完毕
    // 一般进行数据请求
    console.log("created");
    // console.log(this.count);
    // console.log(this.addCount);
  },
  beforeMount() {
    console.log("beforeMount");
    // 虚拟dom 已经创建完毕, 还没有转成真实的dom 更新
    //console.log(document.querySelector("#count")); / / null;
  },
  mounted() {
    console.log("mounted");
    // 虚拟dom 转成真实dom, 并挂载到dom 树上
    //console.log(document.querySelector("#count")); // 获取了标签
  },
  beforeUpdate() {
    console.log("beforeUpdate");
    // 数据已经更新 , dom 还未更新 (虚拟dom这个dom的js描述对象中的已经更新了)
    // console.log(this.count); // 最新的值
    // console.log(document.querySelector("#count").innerHTML); // dom 还是旧的dom
  },
  updated() {
    // 虚拟dom 更新成真实dom , 并且已经挂载到dom 树上
    console.log(document.querySelector("#count").innerHTML); //dom 已经更新
  },
  beforeDestory() {
    console.log("beforeDestory");
  },
  destoryed() {
    console.log("beforeDestory");
    // 进行清除页面事件
    // 清除定时器
    // 取消请求 等等副作用
  }
};
</script>
<style scoped>
</style>